import './CommonMenu.scss'

import { v4 } from 'uuid'

import { useEventEmitter } from 'ahooks'
import { useEffect, useState } from 'react'

import { refreshStore } from '../Config/zustand'
import SetFieldConfig from '../Utils/SetFieldConfig'

import { DevextremeDataGrid } from '../Utils/Devextreme'

import { PagePagination, PageTopOptions, PageLeftMenu } from '../Utils/PageAssembly'


// 现有字段
const FieldsArray = ['uuid', 'type', 'tableName', 'sortId', 'remark', 'targetUrl', 'icon']
// 字段配置
// 字段配置
const FieldsConfig = [
    {
        dataField: 'uuid',          // 数据字段
        caption: '唯一ID',          // 显示名称
        isAdded: true,              // 参与新增
        isModify: true,             // 参与修改
        isSearch: false,             // 参与查询
        visible: false,              // 是否显示
        fixed: true,             // 固定当前列
        fixedPosition: 'left',           // 固定位置
        allowResizing: true,        // 列宽是否可调整
        minWidth: 50,        // 最小单元格
        width: 160,          //列宽
        alignment: 'center',         // 对齐方式
        cssClass: '',                // 额外样式
        dataType: '',                // 字段类型
        format: '',                  // 序列化方式

        allowGrouping: true,        // 是否参与分组
        autoExpandGroup: true,   // 自动展开分组
        groupIndex: 0,         // 默认分组  -1 为空

        allowReordering: false,      // 是否可排序
        allowSorting: true,           // 是否可排序

        defaultSortIndex: 0,          // 排序顺序
        defaultSortOrder: 'asc',       // 排序方式
        
        allowHeaderFiltering: true,  // 筛选器状态
        allowFiltering: true,        // 是否行内筛选 
        showInColumnChooser: true,     // 是否出现在列选择器
        calculateCellValue: 'abc,bbc',  // 组合单元格
        customizeText: 'abc',    // 序列化单元格
        isMapping: false,         // 是否映射
        mappingType: '',         // 映射类型
        mappingData: '',         // 映射数据,
        valueType: 'Hidden'
    },
    {
        dataField: 'tableName',
        caption: '菜单名称',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'Input'
    },
    {
        dataField: 'type',
        caption: '菜单类型',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: true,
        mappingType: 'DataMapping',
        mappingData: 'menuType',
        mappingValue: 'value',
        mappingLable: 'label',
        valueType: 'Radio'
    },
    {
        dataField: 'targetUrl',
        caption: '页面地址',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'Input'
    },
    {
        dataField: 'parentUuid',
        caption: '父级节点',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: true,
        mappingType: 'ApiMapping',
        mappingData: 'Menu',
        mappingValue: 'value',
        mappingLable: 'title',
        valueType: 'TreeSelect'
    },
    {
        dataField: 'icon',
        caption: '图标',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'Icon'
    },
    {
        dataField: 'sortId',
        caption: '排序',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'Input'
    },
    {
        dataField: 'isEnabled',
        caption: '是否启用',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: true,
        mappingType: 'DataMapping',
        mappingData: 'isYeas',
        mappingValue: 'value',
        mappingLable: 'label',
        valueType: 'Radio'
    },
    {
        dataField: 'remark',
        caption: '备注信息',
        isAdded: true,
        isModify: true,
        isSearch: false,
        visible: true,
        fixed: true,
        fixedPosition: 'left',
        allowResizing: true,
        minWidth: 50,
        width: 160,
        alignment: 'center',
        cssClass: '',
        dataType: '',
        format: '',
        allowGrouping: true,
        autoExpandGroup: true,
        groupIndex: 0,
        allowReordering: false,
        allowSorting: true,
        defaultSortIndex: 0,
        defaultSortOrder: 'asc',
        allowHeaderFiltering: true,
        allowFiltering: true,
        showInColumnChooser: true,
        calculateCellValue: 'abc,bbc',
        customizeText: 'abc',
        isMapping: false,
        mappingType: '',
        mappingData: '',
        valueType: 'TextArea'
    },
]

const typeMapping = { 1: "home", 2: "list", 3: "menu" }

const getData = (num) => {

    const data = [...Array(num)].map((_, i) => {
        return {
            uuid: v4(),
            type: typeMapping[Math.floor(Math.random() * 3) + 1],
            tableName: '菜单 ' + Math.random(),
            sortId: i,
            remark: '',
            targetUrl: 'url' + i,
            icon: 'icon' + i
        }
    })
    return data
}


const fields = [
    // 字段
    {
        alignment: 'center',
        dataField: 'dataField',
        caption: '数据字段',
        valueType: 'Input'
    },
    {
        alignment: 'center',
        dataField: 'caption',
        caption: '显示名称',
        valueType: 'Input'
    },
    // 功能
    {
        alignment: 'center',
        dataField: 'visible',
        caption: '是否显示',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'isAdded',
        caption: '参与新增',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'isModify',
        caption: '参与修改',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'isSearch',
        caption: '参与查询',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    // 排列
    {
        alignment: 'center',
        dataField: 'alignment',
        caption: '对齐方式',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'alignment',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'cssClass',
        caption: '额外样式',
        valueType: 'Input'
    },
    {
        alignment: 'center',
        dataField: 'dataType',
        caption: '字段类型',
        valueType: 'Input'
    },
    {
        alignment: 'center',
        dataField: 'format',
        caption: '序列化方式',
        valueType: 'Input'
    },
    // 列宽
    {
        alignment: 'center',
        dataField: 'fixed',
        caption: '固定当前列',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'allowResizing',
        caption: '列宽是否可调整',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'minWidth',
        caption: '最小列宽',
        valueType: 'InputNumber'
    },
    {
        alignment: 'center',
        dataField: 'width',
        caption: '默认列宽',
        valueType: 'InputNumber'
    },
    // 分组
    {
        alignment: 'center',
        dataField: 'allowGrouping',
        caption: '是否参与分组',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'autoExpandGroup',
        caption: '自动展开分组',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'groupIndex',
        caption: '默认分组',
        valueType: 'InputNumber'
    },
    // 排序
    {
        alignment: 'center',
        dataField: 'allowReordering',
        caption: '是否可排序',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'allowSorting',
        caption: '是否可排序',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'defaultSortIndex',
        caption: '排序顺序',
        valueType: 'InputNumber'
    },
    {
        alignment: 'center',
        dataField: 'defaultSortOrder',
        caption: '排序方式',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'sortOrder',
        valueType: 'Radio',
    },
    // 筛选
    {
        alignment: 'center',
        dataField: 'allowHeaderFiltering',
        caption: '筛选器状态',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'allowFiltering',
        caption: '是否行内筛选',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'showInColumnChooser',
        caption: '是否出现在列选择器',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    // 映射设置
    {
        alignment: 'center',
        dataField: 'isMapping',
        caption: '是否映射',
        isMapping: true,
        mappingType: 'Mapping',
        mappingData: 'isYeasBool',
        valueType: 'Radio',
    },
    {
        alignment: 'center',
        dataField: 'mappingType',
        caption: '映射类型',
        valueType: 'Input'
    },
    {
        alignment: 'center',
        dataField: 'mappingData',
        caption: '映射数据',
        valueType: 'Input'
    },
    // 自定单元格
    {
        alignment: 'center',
        dataField: 'calculateCellValue',
        caption: '组合单元格',
        valueType: 'Input'
    },
    {
        alignment: 'center',
        dataField: 'customizeText',
        caption: '序列化单元格',
        valueType: 'Input'
    },
    {
        alignment: 'center',
        dataField: 'cellRender',
        caption: '自定义单元格',
        valueType: 'Input'
    },
]

const DataConfig = {
    base: {
        allowColumnReordering: true, // 允许重新排序
        showColumnHeaders: true, // 是否显示列标题
        columnMinWidth: 50, // 列最小宽度
        columnAutoWidth: true,// 自动宽度
        allowColumnResizing: true, //是否可调整列宽
        columnResizingMode: 'widget', //列宽状态  nextColumn 总组件宽度不会更改  widget 所有其他列保持其宽度
        repaintChangesOnly: true,// 动态摘要 ,
        focusedRowEnabled: true, // 是否聚焦
        showBorders: false,// 是否外边框
        showRowLines: false,// 子单元格底边框
        showColumnLines: false,// 子单元格竖向边框
        rowAlternationEnabled: true,//斑马格
    },

    columnDlyState: true,  // 是否启用自定义列
    columnDlyWidth: 400,  // 自定义列
    columnFixing: true,// 启用 固定列
    columnChooser: true, //启用 列选择器
    columnChooserMode: 'select', // 列选择器模式 dragAndDrop拖拽   select选择
    columnChooserSearch: true, // 启用 列选择器搜索框
    columnChooserSearchPlaceholder: '默认文字', // 搜索框默认文字
    columnChooserSelectionAll: true, // 列选择器 全选按钮
    columnChooserSelectionClick: true, // 列选择器 单击选择
    columnChooserSelectionRecursive: true, // 列选择器 递归选择 (呈现树形)
    filterRow: true, // 启用 行筛选
    filterRowApplyFilter: 'none', // 行筛选方式  none 自动搜索 onClick 点击头部搜索
    searchPanel: true,  // 启用头部筛选
    headerFilter: true, // 启用 筛选器
    groupPanel: true,  // 启用 分组
    groupPanelAutoExpandAll: true, // 分组自动展开
    groupPanelAllowColumnDragging: true, // 是否可以取消分组
    groupingExpandMode: 'buttonClick', // 分组 展开模式 rowClick 点击行 buttonClick 点击按钮
    groupingContextMenuEnabled: true, // 分组 启用右键菜单
    groupingAutoExpandAll: true, // 分组 自动展开
    groupingAllowCollapsing: true, // 是否允许折叠 (false 只能通过编程控制)
    sorting: 'multiple',  //排序功能 不可 none 单选 single 多选 multiple
    selectionMode: 'multiple',//选中数据行 不可 none 单选 single 多选 multiple
    selectionAllowSelectAll: true,  // 是否全选
    selectionSelectAllMode: 'allPages',// 全选方式 'allPages' 所有记录, 'page' 当前页面记录
    selectionShowCheckBoxesMode: 'onLongTap',  // 选择方式 none 不可选中 always 选择框选中 onClick 点击选中  onLongTap 长按选中
    rowDragging: false,  // 启用行拖拽
    rowDraggingShowDragIcons: true,  //是否有把手
    export: true, // 启用 导出
    exportAllowExportSelectedData: true, // 全部导出
    loadPanel: true,  // 加载窗口
}
const ColumnOptions = (e) => [
    {
        title: '修改',
        smallTitle: '修改字段配置',
        modalType: 'model',
        page: 'FromModify',
        data: {
            url: 'getAdminA06ProjectList',
            fields: FieldsConfig,
            init: e.data,
        }
    }
]

const CommonMenu = () => {
    const { refresh } = refreshStore()
    const [dataSource, setDataSource] = useState([])
    const [total, setTotal] = useState(500)
    const [Paging, setPageing] = useState({ pageIndex: 1, pageSize: 10 })

    const PagingEvent = useEventEmitter()
    PagingEvent.useSubscription(val => {
        // 数据请求
        setPageing(val)
    })

    useEffect(() => {
        setDataSource(getData(Paging.pageSize))
    }, [refresh, Paging])

    const excelConfig = {}
    const topOptions = {
        batchReview: { url: '123' },
        batchDeletion: { url: '123' },
        added: { url: '123' },
        refresh: { url: '123' },
        sortData: { url: '123' },
        search: { url: '123' },
    }



    const DevEvent = useEventEmitter()
    DevEvent.useSubscription(val => {
        console.log('DEV 回调中控', val)

    })



    return (
        <div className='CommonMenu'>
            <div className='Left'>
                <PageLeftMenu />
            </div>
            <div className='Right'>
                <div className='Top'>
                    <PageTopOptions excelConfig={excelConfig} topOptions={topOptions} DevEvent={DevEvent} />
                </div>
                <div className='Table'>
                    {/* 页面配置 */}
                    <DevextremeDataGrid
                        DataConfig={DataConfig}
                        dataSource={dataSource}
                        fields={FieldsConfig}
                        ColumnOptions={ColumnOptions}
                        DevEvent={DevEvent}
                    />
                    <PagePagination total={total} Paging={Paging} PagingEvent={PagingEvent} />
                </div>
            </div>

            {/* 字段配置 */}
            {/* <SetFieldConfig
                dataSource={dataSource}
                fields={fields}
            /> */}
        </div>
    )
}

export default CommonMenu